import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue';
import brandManagement from "@/views/brandManagement.vue";
import useOfStyles from "@/views/useOfStyles.vue";
import inlineStyles from "@/views/inlineStyles.vue";
import forKey from "@/views/forKey.vue";
import ifShow from "@/views/ifShow.vue";
import axiosPage from "@/views/axiosPage.vue";
import filterPage from "@/views/filterPage.vue";
import lifeCycle from "@/views/lifeCycle.vue";
import animationPage from "@/views/animationPage.vue";
import indexView from "@/views/indexView.vue";
import layoutPage from "@/layout/layoutPage.vue";
import shoppingCart from "@/views/shoppingCart.vue";

Vue.use(VueRouter)

const routes = [
  //   路由重定向
  {
    path: '/',
    redirect:'/about'
  },
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path:'/useOfStyles',
    component:useOfStyles
  },
  {
    path:'/brand',
    component: brandManagement,
    children:[
      {
        path:'forKey',
        component: forKey
      },
      {
        path:'ifShow',
        component: ifShow
      },
    ]
  },
  {
    path: "/inlineStyles",
    component: inlineStyles
  },
  {
    path:'/forKey',
    component: forKey
  },
  {
    path:'/ifShow',
    component: ifShow
  },
  {
    path:'/axios',
    component: axiosPage
  },
  {
    path:'/filter',
    component: filterPage
  },
  {
    path:'/life',
    component: lifeCycle
  },
  {
    path:'/animation',
    component: animationPage
  },
  {
    path:'/indexView',
    component: indexView
  },
  {
    path:'/layout',
    component: layoutPage,
    children: [
      {
        path:'axios',
        // component: axiosPage
        component: {
          default: axiosPage,
          animationPage

        }
      },
      {
        path:'filter',
        component: filterPage
      }

    ]
  },
  {
    path:'/shopping',
    component: shoppingCart
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
  // 自定义路由高亮
  linkActiveClass: 'myLink',
})

export default router
